<script lang="ts" setup>
import { computed } from 'vue';
import { CouponStatus } from '@/types/coupon';
import { RouteMap, useRouter } from '@/router';

import { useLocale } from '@/locale/locale';

const { t } = useLocale();

const props = defineProps<{
  disabled: boolean;
  status?: CouponStatus;
}>();

const router = useRouter();

const text = computed(() => {
  switch (props.status) {
    case 1:
      return t('LAKey_couponToUsed');
    case 2:
      return t('LAKey_couponUsed');
    case 3:
      return t('LAKey_couponExpired');
    case 4:
      return t('LAKey_couponClose');
    case 5:
      return t('LAKey_couponToUsed');
  }
});

function navigateToHotel() {
  router.to(RouteMap.home);
}
</script>

<template>
  <view class="coupon-btn-v">
    <view :class="{ 'is-disabled': disabled }" class="coupon-btn" @click.stop="navigateToHotel">
      {{ text }}
    </view>
  </view>
</template>

<style lang="scss">
.coupon-btn-v {
  align-items: center;
  bottom: 0;
  display: flex;
  position: absolute;
  right: 32rpx;
  top: 0;
}

.coupon-btn {
  border: 1px solid #269c74;
  border-radius: 244rpx;
  color: #269c74;
  font-size: 24rpx;
  line-height: 34rpx;
  padding: 10rpx 20rpx;
  text-align: center;

  &.is-disabled {
    border-color: #c4c4c4;
    color: #c4c4c4;
  }
}
</style>
